<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>消息通知 - 废物回收管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <input type="hidden" name="_csrf" th:value="${_csrf?.token}" />
    <meta name="_csrf_header" th:content="${_csrf?.headerName}" />
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .message-container {
            max-width: 1200px;
            margin: 2rem auto;
        }
        .message-tabs {
            background: white;
            border-radius: 15px;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .message-card {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: transform 0.2s;
            cursor: pointer;
        }
        .message-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .message-card.unread {
            border-left: 4px solid #0d6efd;
        }
        .message-title {
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: #212529;
        }
        .message-content {
            color: #6c757d;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .message-meta {
            color: #adb5bd;
            font-size: 0.9rem;
        }
        .message-type {
            padding: 0.25rem 0.5rem;
            border-radius: 10px;
            font-size: 0.8rem;
            margin-right: 0.5rem;
        }
        .type-system {
            background-color: #e7f1ff;
            color: #0d6efd;
        }
        .type-order {
            background-color: #fff3cd;
            color: #ffc107;
        }
        .type-evaluation {
            background-color: #d1e7dd;
            color: #198754;
        }
        .badge-unread {
            background-color: #dc3545;
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 10px;
            font-size: 0.8rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/resident">
                <i class="fas fa-recycle me-2"></i>废物回收管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/resident">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/orders/create">预约回收</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/category/guide">分类指南</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container message-container">
        <!-- 消息分类标签 -->
        <div class="message-tabs">
            <ul class="nav nav-pills" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#all">
                        全部消息
                        <span class="badge-unread ms-2" th:if="${unreadCount > 0}" th:text="${unreadCount}">3</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#system">
                        系统通知
                        <span class="badge-unread ms-2" th:if="${systemUnreadCount > 0}" th:text="${systemUnreadCount}">1</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#order">
                        订单消息
                        <span class="badge-unread ms-2" th:if="${orderUnreadCount > 0}" th:text="${orderUnreadCount}">2</span>
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="pill" data-bs-target="#evaluation">
                        评价消息
                        <span class="badge-unread ms-2" th:if="${evaluationUnreadCount > 0}" th:text="${evaluationUnreadCount}">0</span>
                    </button>
                </li>
            </ul>
        </div>

        <!-- 消息列表 -->
        <div class="tab-content">
            <!-- 全部消息 -->
            <div class="tab-pane fade show active" id="all">
                <div class="message-card unread" th:each="message : ${messages}" 
                     th:classappend="${message.status == 0} ? 'unread' : ''"
                     th:data-id="${message.id}">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <span class="message-type" 
                                  th:classappend="${'type-' + message.type}"
                                  th:text="${message.typeText}">系统</span>
                            <span class="message-title" th:text="${message.title}">系统维护通知</span>
                        </div>
                        <div th:if="${message.status == 0}" class="badge bg-danger">未读</div>
                    </div>
                    <div class="message-content" th:text="${message.content}">
                        系统将于2024年3月1日凌晨2:00-4:00进行例行维护，维护期间系统将暂停服务。
                    </div>
                    <div class="message-meta">
                        <span th:text="${message.createTime}">2024-03-01 10:00</span>
                    </div>
                </div>
            </div>

            <!-- 系统通知 -->
            <div class="tab-pane fade" id="system">
                <div class="message-card" th:each="message : ${systemMessages}" 
                     th:classappend="${message.status == 0} ? 'unread' : ''"
                     th:onclick="'readMessage(' + ${message.id} + ')'">
                    <!-- 系统消息内容结构与全部消息相同 -->
                </div>
            </div>

            <!-- 订单消息 -->
            <div class="tab-pane fade" id="order">
                <div class="message-card" th:each="message : ${orderMessages}"
                     th:classappend="${message.status == 0} ? 'unread' : ''"
                     th:onclick="'readMessage(' + ${message.id} + ')'">
                    <!-- 订单消息内容结构与全部消息相同 -->
                </div>
            </div>

            <!-- 评价消息 -->
            <div class="tab-pane fade" id="evaluation">
                <div class="message-card" th:each="message : ${evaluationMessages}"
                     th:classappend="${message.status == 0} ? 'unread' : ''"
                     th:onclick="'readMessage(' + ${message.id} + ')'">
                    <!-- 评价消息内容结构与全部消息相同 -->
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <nav aria-label="Page navigation" class="mt-4">
            <ul class="pagination justify-content-center">
                <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled'">
                    <a class="page-link" th:href="@{/message/list(page=${currentPage - 1})}">上一页</a>
                </li>
                <li class="page-item" th:each="page : ${#numbers.sequence(1, totalPages)}"
                    th:classappend="${page == currentPage} ? 'active'">
                    <a class="page-link" th:href="@{/message/list(page=${page})}" th:text="${page}">1</a>
                </li>
                <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled'">
                    <a class="page-link" th:href="@{/message/list(page=${currentPage + 1})}">下一页</a>
                </li>
            </ul>
        </nav>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script th:inline="javascript">
        document.addEventListener('DOMContentLoaded', function() {
            // 获取CSRF令牌
            const token = document.querySelector('input[name="_csrf"]').value;
            const header = document.querySelector('meta[name="_csrf_header"]').getAttribute('content');

            // 为所有消息卡片添加点击事件
            document.querySelectorAll('.message-card').forEach(card => {
                card.addEventListener('click', function() {
                    const messageId = this.getAttribute('data-id');
                    if (messageId) {
                        const headers = new Headers();
                        headers.append('Content-Type', 'application/json');
                        if (token && header) {
                            headers.append(header, token);
                        }

                        fetch(`/message/${messageId}/read`, {
                            method: 'POST',
                            headers: headers
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.code === 200) {
                                location.reload();
                            } else {
                                console.error('标记已读失败:', data.message);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });
                    }
                });
            });
        });
    </script>
</body>
</html> 